<!--
 * @Description: 应用名称与管理员
 * @Author: 曾祥
 * @LastEditors: seadon
 * @Date: 2021-12-22 16:30:37
 * @LastEditTime: 2022-09-23 14:42:55
-->
<template>
	<a-card class="card-box card-style-b" @click="toPath(item)">
		<div class="card-box-icon">
			<img :src="item.icon" alt />
		</div>
		<div class="card-box-right">
			<div class="right-title">
				<EllipsisTooltip :title="item.name" />
			</div>
			<div class="right-detail">
				<ok-person-cell
					.personInfo="item.user_bo"
					width="16px"
					height="16px"
				></ok-person-cell>
				<EllipsisTooltip :title="item.user_bo?.employee_name" />
			</div>
		</div>
		<div
			v-if="item.collected"
			class="card-collected"
			@click.stop="collectionEvents(item)"
		>
			<i class="low-code iconshoucang collected"></i>
		</div>
		<div class="card-favorite" v-else @click.stop="collectionEvents(item)">
			<i class="low-code icondaishoucang card-favorite-icon"></i>
		</div>
	</a-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
const userColor = {
	female: '#E672B7', // 'linear-gradient(180deg, #FD99D5 0%, #E672B7 100%)',
	male: '#64A3FF', // 'linear-gradient(360deg, #387FF5 3.23%, #64A3FF 100%)',
}
const props = defineProps<{ item: object }>()
const emit = defineEmits(['toPath', 'collectionEvents'])

const toPath = (item: any) => {
	emit('toPath', item)
}
const collectionEvents = (item: any) => {
	emit('collectionEvents', item)
}
</script>

<style lang="less" scoped>
.card-style-b.card-box {
	:deep {
		.ant-card-body {
			padding: 16px 16px 20px;
			.card-box-right .right-detail {
				margin-top: 4px;
				height: 17px;
				.pok-ellipsis-tooltip {
					margin-left: 4px;
				}
			}
		}
	}
	.card-box-icon {
		min-width: 40px;
		height: 40px;
		width: 40px;
		img {
			width: 100%;
			height: 100%;
			border-radius: 9px;
		}
	}
	.card-box-right {
		height: 40px;
		line-height: 1;
	}
	.card-favorite {
		margin-top: -16px;
		background: url('@/assets/images/card_favorite_bg.svg');
	}
}
</style>
